<template>
  <div class="modalSty">
    <a-modal
      width="800px"
      title="批量修改"
      :visible="bulkDialog"
      :confirm-loading="confirmLoading"
      @ok.prevent="handleOk"
      @cancel="handleCancel"
      @afterClose="mainDialogClose"
    >
      <div>
        <a-form-model
          :model="editform"
          :rules="editformRules"
          ref="editform"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="修改程序名:" prop="newProduceName">
            <a-input v-model="editform.newProduceName" />
          </a-form-model-item>
        </a-form-model>
      </div>
      <div class="fix" @scroll.passive="getScroll($event)">
        <a-table
          class="demo-infinite-container"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, onSelectAll: onSelectAll }"
          :columns="columns"
          :data-source="dataList"
          :pagination="false"
        ></a-table>
      </div>
    </a-modal>
  </div>
</template>
<script>
import api from '@/api/equipment';

const columns = [
  {
    title: '程序名',
    dataIndex: 'produceName',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '加工开始时间',
    dataIndex: 'startTime',
  },
  {
    title: '加工结束时间',
    dataIndex: 'endTime',
  },
  {
    title: '当前计件数',
    dataIndex: 'partCount',
  },
];
export default {
  props: {
    bulkDialog: Boolean,
  },

  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      confirmLoading: false,
      loading: false,
      columns,
      username: null,
      CompanyId: null,
      MacSNs: [],
      equID: null,
      pageSize: 10,
      pageNum: 1,
      ids: [], //选中id的数组
      dataList: [], //请求数据的数组
      selectedRowKeys: [], //选中的
      arr: [], //选中ID去重的数组
      loading: false,
      count: 0,
      total: 0,

      editform: {
        newProduceName: '', //修改绑定的
      },
      editformRules: {
        newProduceName: [{ required: true, message: '内容不能为空', trigger: 'change' }],
      },
    };
  },

/*   watch: {
    bulkDialog: function (newval, oldval) {
      if (newval == true) {
        this.getAllProdu();
      }
    },
  }, */

  created() {
    if (this.$route.query.macsn) {
      this.MacSNId = this.$route.query.macsn;
      this.equID = this.$route.query.groupid;
    }
    let roleId = localStorage.getItem('roleId');
    if (roleId == 1) {
      this.CompanyId = localStorage.getItem('compid');
    } else {
      this.CompanyId = localStorage.getItem('choseCompanyId');
    }
    this.username = this.userName = localStorage.getItem('userName');
    this.getAllProdu();
  },
  methods: {
    getScroll(event) {
      // 滚动条距离底部的距离scrollBottom
      let scrollBottom = event.target.scrollHeight - event.target.scrollTop - event.target.clientHeight;

      if (scrollBottom < 10) {
        this.getAllProdu(this.pageNum++);
      }
    },

    handleCancel() {
      this.$emit('update:bulkDialog', false);
      this.selectedRowKeys = [];
      this.editform.newProduceName = '';
    },

    async getAllProdu() {
      let params = {
        Username: this.username,
        companyId: this.CompanyId,
        groupId: this.equID,
        macSN: this.MacSNId,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      const res = await api.getAllProduce(params);
      if (res.msgCode != 0) {
        this.$message.error('获取数据失败');
        return;
      }
      this.dataList = this.dataList.concat(res.data.rows);
      this.total = res.data.total;
    },
    onSelectChange(selectedRowKeys, record) {
      this.selectedRowKeys = selectedRowKeys;
      if (this.selectedRowKeys.length == 0) {
        this.ids = [];
        this.arr = [];
      } else {
        record.forEach((item) => {
          this.ids.push(item.opId);
          this.arr = [...new Set(this.ids)];
        });
      }
    },
    onSelectAll(selected, selectedRows, changeRows) {
      this.total = selectedRows.length;
      if (selected == true) {
        this.$message.info(`一共选择了 ${this.total} 条`);
      } else {
        this.$message.warning('你取消了选择');
      }
    },
    handleOk() {
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning('请勾选需要修改的');
        return;
      }
      this.$refs.editform.validate(async (valid) => {
        if (!valid) {
          return false;
        } else {
          const res = await api.postamendroutinename({
            idList: this.arr,
            newProduceName: this.editform.newProduceName,
          });

          if (res.msgCode == 0) {
            this.$message.success({
              content: res.msgDesc,
            });

            this.selectedRowKeys = [];
            this.editform.newProduceName = '';
            this.getAllProdu();

            this.$emit('update:bulkDialog', false);
          } else {
            this.$message.error();
            ({
              content: '修改失败',
            });
            this.$emit('update:bulkDialog', false);
          }
        }

        this.mainDialogClose();
      });
    },
    mainDialogClose() {
      this.$emit('closeDialogRefreshData');
    },
  },
}; //
</script>
<style scoped>
/deep/ .ant-modal-body {
  height: 600px;
  /* 
  overflow: auto; */
}
/deep/ .ant-table-thead {
  position: sticky;
  top: 0px;
  z-index: 99999;
}
.fix {
  height: 485px;
  overflow: auto;
}
</style>
